<template>
    <div>
        <p>
            <button class="btn btn-white btn-default btn-round" @click="refresh()">
                <i class="ace-icon fa fa-refresh red"></i>
                刷新
            </button>
            &nbsp;
            <button class="btn btn-white btn-success btn-round" @click="openAddModal()">
                <i class="ace-icon fa fa-edit blue"></i>
                新增
            </button>
        </p>

        <table id="simple-table" class="table  table-bordered table-hover">
            <thead>
            <tr>
                <th class="center">ID</th>
                <th class="center">登陆名</th>
                <th class="center">昵称</th>
                <th class="center">密码</th>
                <th class="center">操作</th>
            </tr>
            </thead>

            <tbody>
            <tr v-for="user in users">
                <td class="center">{{user.id}}</td>
                <td class="center">{{user.loginName}}</td>
                <td class="center">{{user.name}}</td>
                <td class="center">{{user.password}}</td>
                <td class="center">
                    <div class=" btn-group">
                        <button title="修改密码" class="btn btn-white btn-xs btn-default btn-round"
                                @click="openEditPasswordModal(user.id)">
                            <i class="ace-icon fa fa-key bigger-120"></i>
                        </button>
                        <button title="分配角色" class="btn btn-white btn-xs btn-default btn-round"
                                @click="openAssignRoleModal(user.id)">
                            <i class="ace-icon fa fa-list bigger-120"></i>
                        </button>
                        <button title="修改用户" class="btn btn-white btn-xs btn-default btn-round"
                                @click="openEditModal(user.id)">
                            <i class="ace-icon fa fa-edit bigger-120"></i>
                        </button>
                        <button title="删除用户" class="btn btn-white btn-xs btn-danger btn-round"
                                @click="deleteById(user.id)">
                            <i class="ace-icon fa fa-trash-o bigger-120"></i>
                        </button>
                    </div>

                </td>
            </tr>
            <tr v-if="users.length === 0">
                <td colspan="5" class="center" style="background-color: lightgrey;">暂无数据</td>
            </tr>
            </tbody>
        </table>
        <!-- 分页组件 -->
        <pagination ref="pagination" v-bind:list="list"></pagination>

        <!-- 模态框 -->
        <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="border-color: #aa160e;background-color: lightblue">
                    <div class="modal-header">
                        <button type="button" class="close blue" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title grey bolder" style="font-family: 'Courier New', Courier, monospace"
                            id="myModalLabel">{{modalTitle}}</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right">登陆名 </label>
                                <div class="col-sm-9">
                                    <input v-bind:disabled="user.id" v-model="user.loginName" type="text"
                                           placeholder="登陆名" class="col-xs-10 col-sm-5"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right"> 昵称</label>
                                <div class="col-sm-9">
                                    <input v-model="user.name" type="text" placeholder="昵称" class="col-xs-10 col-sm-5"/>
                                </div>
                            </div>
                            <div v-show="!user.id" class="form-group">
                                <label class="col-sm-3 control-label no-padding-right"> 密码</label>
                                <div class="col-sm-9">
                                    <input v-model="user.password" type="password" placeholder="密码"
                                           class="col-xs-10 col-sm-5"/>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default btn-round"
                                data-dismiss="modal">
                            关闭
                        </button>
                        <button @click="save()" type="button" class="btn btn-primary btn-round">
                            保存
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!--密码修改-->
        <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="border-color: #aa160e;background-color: lightblue">
                    <div class="modal-header">
                        <button type="button" class="close blue" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title grey bolder">修改密码</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right">新密码 </label>
                                <div class="col-sm-9">
                                    <input v-model="user.password" type="password"
                                           placeholder="新密码" class="col-xs-10 col-sm-5"/>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default btn-round"
                                data-dismiss="modal">
                            关闭
                        </button>
                        <button @click="resetPassword()" type="button" class="btn btn-primary btn-round">
                            保存
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!--分配角色-->
        <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="border-color: #aa160e;background-color: lightblue">
                    <div class="modal-header">
                        <button type="button" class="close blue" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title grey bolder center">角色分配</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <div class="box1 col-md-6">
                                    <div class="btn-group buttons">
                                        <button @click="allAssignRole()" type="button" class="btn moveall btn-white btn-bold btn-info"
                                                title="Move all">
                                            <i class="fa fa-arrow-right"></i>
                                            全部分配
                                        </button>
                                    </div>
                                    <select  multiple="multiple"
                                            class="form-control"
                                            style="height: 270px;">
                                        <option @dblclick="assignRole(role)" v-for="role in unAssignRoles" v-bind:value="role.id">{{role.name}}</option>
                                    </select>
                                </div>
                                <div class="box2 col-md-6">
                                    <div class="btn-group buttons">
                                        <button @click="allUnAssignRole()" type="button" class="btn removeall btn-white btn-bold btn-info"
                                                title="Remove all">
                                            <i class="fa fa-arrow-left"></i>
                                            全部移除
                                        </button>
                                    </div>
                                    <select multiple="multiple"
                                            class="form-control"
                                            style="height: 270px;">
                                        <option @dblclick="unAssignRole(role)" v-for="role in assignRoles" v-bind:value="role.id">{{role.name}}</option>
                                    </select>
                                </div>

                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default btn-round"
                                data-dismiss="modal">
                            关闭
                        </button>
                        <button @click="saveAssignedRoles()" type="button" class="btn btn-primary btn-round">
                            保存
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import Pagination from "../../components/pagination.vue"

    export default {
        name: "user",
        components: {
            Pagination
        },
        data: function () {
            return {
                users: [],
                user: {
                    name: "",
                    courseId: ''
                },
                modalTitleArr: {
                    insert: "新增用户",
                    update: "修改用户"
                },
                modalTitle: "",
                assignRoles:[],
                unAssignRoles:[],
                useId:""
            }
        },
        mounted: function () {
            // this.$parent.activeSidebar("business-user-sidebar")
            let _this = this;
            _this.list();
        },
        methods: {
            /*保存分配好的角色*/
            saveAssignedRoles(){
                let _this = this;
                let roleIds = [];
                for (let i = 0; i < _this.assignRoles.length; i++) {
                    roleIds.push(_this.assignRoles[i].id)
                }
                let roleUserDto = {userId: _this.userId, roleIds:roleIds};
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/system/admin/roleUser/saveBatch/', roleUserDto).then((response)=>{
                    if (response.data.success) {
                        Toast.success(response.data.message);
                    } else {
                        Toast.error(response.data.message);
                    }
                    $("#myModal3").modal("hide");
                })
            },
            /*全部移除角色*/
            allUnAssignRole(){
                let _this = this;
                for (let i = 0; i < _this.assignRoles.length; i++) {
                    _this.unAssignRoles.push(_this.assignRoles[i]);
                }
                _this.assignRoles = [];
            },
            /*全部分配角色*/
            allAssignRole(){
                let _this = this;
                for (let i = 0; i < _this.unAssignRoles.length; i++) {
                    _this.assignRoles.push(_this.unAssignRoles[i]);
                }
                _this.unAssignRoles = [];
            },
            /*单个: 双击分配角色*/
            assignRole(role){
                let _this = this;
                for (let i = 0; i < _this.unAssignRoles.length; i++) {
                    if (role.id === _this.unAssignRoles[i].id) {
                        _this.unAssignRoles.splice(i,1);
                        break;
                    }
                }
                _this.assignRoles.push(role);
            },
            /*单个: 双击移除角色*/
            unAssignRole(role){
                let _this = this;
                for (let i = 0; i < _this.assignRoles.length; i++) {
                    if (role.id === _this.assignRoles[i].id) {
                        _this.assignRoles.splice(i,1);
                        break;
                    }
                }
                _this.unAssignRoles.push(role);
            },
            /*获取所有用户-角色关系(分配和未分配)*/
            getUserToRoleRelation(){
                let _this = this;
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/system/admin/role/findAssignRoleRelation/'+_this.userId).then((response)=>{
                    _this.unAssignRoles = response.data.data.unAssign;
                    _this.assignRoles = response.data.data.assign;
                    console.log("用户-角色关系: ",response.data.data.unAssign)
                })
            },
            /*打开分配角色模态框*/
            openAssignRoleModal(userId) {
                let _this = this;
                _this.userId = userId;
                _this.getUserToRoleRelation();
                $("#myModal3").modal({backdrop: 'static'});
                $("#myModal3").modal("show");

            },

            /*重置密码*/
            resetPassword() {
                let _this = this;
                if (!Validator.require(_this.user.password, "密码")
                    || !Validator.length(_this.user.password, "密码", 1, 32)) {
                    return;
                }
                _this.user.password = hex_md5(_this.user.password + ran, KEY);
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/system/admin/user/resetPassword/',
                    _this.user).then((response) => {
                    if (response.data.success) {
                        _this.list(_this.$refs.pagination.page);
                        Toast.success(response.data.message);
                    } else {
                        Toast.error(response.data.message);
                    }
                    $("#myModal2").modal("hide");
                });
            },

            /*打开修改密码模态框*/
            openEditPasswordModal(id) {
                let _this = this;
                _this.clearUser();
                _this.user = {id: id, password: ""};
                $("#myModal2").modal({backdrop: 'static'});
                $("#myModal2").modal("show");
            },
            /* 打开新增模态框 */
            openAddModal() {
                let _this = this;
                _this.clearUser();
                _this.modalTitle = _this.modalTitleArr.insert;
                $("#myModal1").modal({backdrop: 'static'});
                $("#myModal1").modal("show");

            },
            /*打开编辑模态框*/
            openEditModal(id) {
                let _this = this;
                _this.clearUser();
                _this.modalTitle = _this.modalTitleArr.update;
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/system/admin/user/findById/' + id).then((response) => {
                    _this.user = response.data.data;
                });
                $("#myModal1").modal({backdrop: 'static'});
                $("#myModal1").modal("show");
            },
            refresh() {
                let _this = this;
                Loading.show();
                _this.list(_this.$refs.pagination.page);
                Loading.hide();
            },
            /* 查找用户 */
            list(page = 1) {
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/system/admin/user/list', {
                    page: page,
                    size: _this.$refs.pagination.size
                }).then((response) => {
                    _this.users = response.data.data.list;
                    _this.$refs.pagination.render(page, response.data.data.total);
                })
            },
            /*保存用户信息到后台*/
            save() {
                let _this = this;
                _this.user.password = hex_md5(_this.user.password + ran, KEY);
                if (!_this.user.id) {
                    /*不存在id为新增*/
                    _this.insert();
                } else {
                    /*存在id为修改*/
                    _this.update();
                }
            },
            /*新增用户*/
            insert() {
                let _this = this;
                /*/!*新增校验*!/
                if (!Validator.require(_this.user.name,"名称")
                || !Validator.require(_this.user.courseId, "课程")
                || !Validator.length(_this.user.courseId,"课程ID",1,19)) {
                    return;
                }*/
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/system/admin/user/save', _this.user).then((response) => {
                    console.log(response);
                    if (response.data.success) {
                        _this.list(_this.$refs.pagination.page);
                        Toast.success(response.data.message);
                    } else {
                        Toast.error(response.data.message);
                    }
                    $("#myModal1").modal("hide");
                });
            },
            /*修改用户*/
            update() {
                let _this = this;
                /*更新校验*/
                /*if (!Validator.require(_this.user.name,"名称")
                        && !Validator.require(_this.user.courseId, "课程")
                        || !Validator.length(_this.user.courseId,"课程ID",1,19)) {
                    return;
                }*/
                _this.user.password = null;
                _this.user.loginName = null;
                _this.$ajax.put(process.env.VUE_APP_SERVER + '/system/admin/user/update', _this.user).then((response) => {
                    if (response.data.success) {
                        _this.list(_this.$refs.pagination.page);
                        Toast.success(response.data.message);
                    } else {
                        Toast.error(response.data.message);
                    }
                    $("#myModal1").modal("hide");
                })
            },
            /*删除用户*/
            deleteById(id) {
                let _this = this;
                /*删除提示框*/
                Confirm.show("", () => {
                    _this.$ajax.delete(process.env.VUE_APP_SERVER + '/system/admin/user/deleteById/' + id).then((response) => {
                        if (response.data.success) {
                            _this.list(_this.$refs.pagination.page);
                            Toast.success(response.data.message);
                        } else {
                            Toast.error(response.data.message);
                        }
                        $("#myModal1").modal("hide");
                    })
                });
            },
            /*清空模态框的数据*/
            clearUser() {
                let _this = this;
                _this.user = {};
                _this.modalTitle = "";
            }
        }
    }
</script>
